<template>
<div>
  <el-card class="box-card" style="width: 1080px;margin: 0 auto">
    <div style="width:1080px;margin: 0 auto;">
      <img src="">
      <p>你好,XX,欢迎来到星光书城结算中心</p>
      <div>
        <template>
          <el-table
              :data="tableData"
              style="width: 1080px">
            <el-table-column
                prop="index"
                label="序号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格">
            </el-table-column>

            <el-table-column
                prop="num"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="money"
                label="小计">
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div>
        <p style="position: absolute;left: 960px;">合计:xx元</p>
      </div>
      <div>
        <el-form label-width="90px" style="width: 400px;margin: 20px auto;float: left;">
          <el-form-item label="收货人:" style="height: 40px">
            <el-input type="text" placeholder="请输入收货人" v-model="username"></el-input>
          </el-form-item>
          <el-form-item label="收货地址:" style="height: 40px">
            <el-input type="text" placeholder="请输入收货地址" v-model="adress"></el-input>
          </el-form-item>
          <el-form-item label="收货人电话:">
            <el-input type="text" placeholder="请输入收货人电话" v-model="phone"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" style="float: right;margin-top: 10px;margin-right: 40px">提交订单</el-button>
      </div>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
  name: "order",
  data() {
    return {
      username:"",
      adress:"",
      phone:"",
      activeIndex: '1',
      tableData: [{
        index: '1',
        name: 'java',
        price: '44.5',
        num:'1',
        money:"44.5"
      }, {
        index: '2',
        name: 'java',
        price: '44.5',
        num:'1',
        money:"44.5"
      }, {
        index: '3',
        name: 'java',
        price: '44.5',
        num:'1',
        money:"44.5"
      }, {
        index: '4',
        name: 'java',
        price: '44.5',
        num:'1',
        money:"44.5"
      }]
    }
  },
  methods:{
    handleSelect(){

    }
  }
}
</script>

<style scoped>

</style>